<template>
  <el-form
    ref="ruleFormRef"
    class="form"
    size="large"
    label-position="left"
    label-width="70px"
    :rules="rules"
    :model="phone"
  >
    <el-form-item label="手机:" prop="phone">
      <el-input v-model.number="phone.phone" />
    </el-form-item>

    <el-form-item label="验证码:" class="verification" prop="verCode">
      <el-input v-model.number="phone.verCode" />
      <el-button type="primary" class="send">发送</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { PhoneReg } from "@/utils/regex";
import { useStore } from "vuex";

const store = useStore();

const phone = reactive({
  phone: "",
  verCode: "",
});

const rules: FormRules = reactive({
  phone: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    {
      required: true,
      pattern: PhoneReg,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  verCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

const ruleFormRef = ref<FormInstance>();

const validatetForm = async (
  formEl: FormInstance | undefined
): Promise<boolean> => {
  if (!formEl) return false;
  let result = false;
  await formEl?.validate((valid) => valid && (result = valid));

  return result;
};

const submit = async () => {
  let result = await validatetForm(ruleFormRef.value);
  if (result) {
    store.dispatch("login/phoneLoaginAction", phone);
  }
};

defineExpose({
  submit,
});
</script>

<style lang="scss" scoped>
.verification {
  display: flex;

  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }

  :deep(.send) {
    margin-left: 15px;
    padding: 0 65px;
  }
}
</style>
